<template>
  <div class="flex justify-between mb-10px">
    <div>
      <TypographyText class="mr-10px">业务场景:</TypographyText>
      <Select
        ref="select"
        v-model:value="scenario"
        :options="scenarioOptions"
        class="mr-10px"
        style="width: 240px"
      ></Select>
      <TypographyText class="mr-10px">治理策略类型:</TypographyText>
      <Select ref="select" v-model:value="strategyMethod" class="mr-10px" style="width: 240px">
        <SelectOption value="retry">retry</SelectOption>
        <SelectOption value="rateLimiting">rateLimiting</SelectOption>
        <SelectOption value="bulkhead">bulkhead</SelectOption>
        <SelectOption value="circuitBreaker">circuitBreaker</SelectOption>
      </Select>
      <Button class="mr-10px" @click="handleReset">重置</Button>
      <Button :size="size" type="primary" @click="getGovernance">查询</Button>
    </div>
    <div>
      <Button v-per="'addGovernance'" :size="size" type="primary" @click="openCreateDrawer">新增治理策略</Button>
    </div>
  </div>
  <div>
    <Table
      :columns="governanceColumns"
      :dataSource="governanceDataSource"
      :loading="loading"
      bordered
      class="main-table"
    >
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'action'">
          <span v-per="'updateGovernance'">
            <Button type="link" @click="openEditDrawer(record)">编辑</Button>
          </span>
          <Divider type="vertical" />
          <span v-per="'activeGovernance'">
            <Button v-if="record.isEnabled === true" type="link" @click="handleChange(record)">停用</Button>

            <Button
              v-if="record.isEnabled === false || record.isEnabled === null"
              type="link"
              @click="handleChange(record)"
              >启用
            </Button>
          </span>
          <Divider type="vertical" />
          <span v-per="'governanceDetail'">
            <Button type="link" @click="openDetailsDrawer(record)">详细信息</Button>
          </span>
          <Divider type="vertical" />
          <span v-per="'deleteGovernance'">
            <Popconfirm cancel-text="取消" ok-text="确认" title="是否确认删除?" @confirm="handleDelete(record)">
              <a>删除</a>
            </Popconfirm>
          </span>
        </template>
      </template>
    </Table>
  </div>
  <GovernanceDrawer ref="governDrawer" @getGovernance="getGovernance"></GovernanceDrawer>
  <GovernanceDetailsDrawer ref="governDetailsDrawer"></GovernanceDetailsDrawer>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { Button, Divider, message, Popconfirm, Select, SelectOption, Table, TypographyText } from 'ant-design-vue';
import {
  GovernanceListItem,
  ScenarioItem,
} from '/@/api/maintenance-center/microservice-govern/governance/model/governanceModel';
import {
  changeGovernance,
  deleteGovernance,
  getGovernanceList,
  getScenarioList,
} from '/@/api/maintenance-center/microservice-govern/governance/governance';
import type { SizeType } from 'ant-design-vue/es/config-provider';
import GovernanceDrawer from '/@/views/maintenance-center/microservice-govern/components/governanceDrawer.vue';
import GovernanceDetailsDrawer from '/@/views/maintenance-center/microservice-govern/components/details/governanceDetailsDrawer.vue';

const loading = ref(true);
let size = ref<SizeType>('middle');
let scenario = ref('');
let strategyMethod = ref('');
const governDrawer = ref();
const governDetailsDrawer = ref();

const scenarioOptions = ref<ScenarioItem[]>([]);
const governanceDataSource = ref<GovernanceListItem[]>([]);

async function getScenario() {
  let getScenarioListParam = { strategyMethod: '' };
  let res = await getScenarioList(getScenarioListParam);
  res.map((e) => {
    e.label = e.scenarioName;
    e.value = e.id;
    return e;
  });
  scenarioOptions.value = res;
}

async function getGovernance() {
  let governancePageParam = {
    scenarioId: scenario.value,
    strategyMethod: strategyMethod.value,
    current: 1,
    size: 10,
  };
  try {
    let res = await getGovernanceList(governancePageParam);
    governanceDataSource.value = res.items;
  } finally {
    loading.value = false;
  }
}

// 重置
async function handleReset() {
  scenario.value = '';
  strategyMethod.value = '';
  await getGovernance();
}

const governanceColumns = [
  {
    title: '策略id',
    dataIndex: 'id',
    key: 'id',
  },
  {
    title: '业务Id',
    dataIndex: 'scenarioId',
    key: 'scenarioId',
  },
  {
    title: '策略名称',
    dataIndex: 'strategyName',
    key: 'strategyName',
  },
  {
    title: '策略方法',
    dataIndex: 'strategyMethod',
    key: 'strategyMethod',
  },
  {
    title: '治理策略参数',
    dataIndex: 'viewParams',
    key: 'viewParams',
  },
  {
    title: '最后更新时间',
    dataIndex: 'lastUpdateTime',
    key: 'lastUpdateTime',
  },
  {
    title: '操作',
    dataIndex: 'action',
    key: 'action',
  },
];
getGovernance();
getScenario();

function openCreateDrawer() {
  governDrawer.value.showDrawer();
}

function openEditDrawer(record: Recordable) {
  governDrawer.value.showDrawer(record);
}

function openDetailsDrawer(record: Recordable) {
  governDetailsDrawer.value.showDrawer(record);
}

async function handleChange(record: Recordable) {
  const res = await changeGovernance({ strategyId: record.id });
  if (res === '改变启用状态成功') {
    message.success('改变启用状态成功');
  } else {
    message.error('改变启用状态时遇到错误：' + res);
  }
  await getGovernance();
}

async function handleDelete(record: Recordable) {
  const res = await deleteGovernance({ strategyId: record.id });
  if (res === '删除治理策略成功') {
    message.success('删除治理策略成功');
  } else {
    message.error('删除治理策略时遇到错误：' + res);
  }
  await getGovernance();
}
</script>
